<template>
  <a-tabs v-model:activeKey="activeKey">
    <a-tab-pane key="1" tab="收入">
      <div class="bill-box">
        <a-table :dataSource="inBillData.value"
                 :columns="columns"
                 :pagination="false">
          <!--
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a>{{ record.name }}一激活</a>
              <a-divider type="vertical" />
              <a>关闭</a>
            </span>
          </template>
        </template>
      -->
        </a-table>
        <!--分页栏-->
        <div class="pagination">
          <a-pagination @change="getInBill"
                        v-model:current="inQuery.pageNum"
                        :total="inTotalUsers.value"
                        :defaultPageSize="inQuery.pageSize"
                        show-less-items
                        simple/>
        </div>
      </div>
    </a-tab-pane>
    <a-tab-pane key="2" tab="支出" force-render>
      <div class="bill-box">
        <a-table :dataSource="outBillData.value"
                 :columns="columns"
                 :pagination="false"><!--
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a>{{ record.name }}一激活</a>
              <a-divider type="vertical" />
              <a>关闭</a>
            </span>
          </template>
        </template>
      -->
        </a-table>
        <!--分页栏-->
        <div class="pagination">
          <a-pagination @change="getOutBill"
                        v-model:current="outQuery.pageNum"
                        :total="outTotalUsers.value"
                        :defaultPageSize="outQuery.pageSize"
                        show-less-items
                        simple/>
        </div>
      </div>
    </a-tab-pane>
  </a-tabs>
</template>
<script>
import {useRouter} from "vue-router";
import {EventSourcePolyfill} from 'event-source-polyfill';
import {getLocalToken} from '@/common';
import {reactive, ref} from 'vue';
import {get, put, post, tip, del} from "@/common";

export default {
  setup() {
    const columns = [
      {
        title: "操作类型",
        dataIndex: "type",
        key: "type",
      },
      {
        title: "变动数额",
        dataIndex: "num",
        key: "num",
      },
      {
        title: "详细信息",
        dataIndex: "mark",
        key: "mark",
      },
      {
        title: "时间",
        dataIndex: "time",
        key: "time",
      },
    ];

    const inQuery = reactive({
      pageNum: 1,
      pageSize: 9
    });

    const outQuery = reactive({
      pageNum: 1,
      pageSize: 9
    });

    const inBillData = reactive({});
    const inTotalUsers = reactive({});
    const outBillData = reactive({});
    const outTotalUsers = reactive({});

    const getInBill = () => {
      get("/score/bill/in", inQuery).then((res) => {
        inBillData.value = res.data.list;
        inTotalUsers.value = res.data.total;
      })
    };
    getInBill();

    const getOutBill = () => {
      get("/score/bill/out", outQuery).then((res) => {
        outBillData.value = res.data.list;
        outTotalUsers.value = res.data.total;
      })
    };
    getOutBill();

    return {
      columns,
      inBillData,
      inTotalUsers,
      inQuery,
      outBillData,
      outTotalUsers,
      outQuery,
      activeKey: ref('1'),
      getInBill,
      getOutBill,
    };
  },
};
</script>

<style>
.bill-box {
  background-color: rgb(255, 255, 255);
  padding: 10px 10px 20px;
}

.bill-title {
  font-size: 16px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding-left: 8px;
  margin-left: 10px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}
</style>